<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>哪些数组的方法是响应式的</title>
</head>
<script src="../js/vue.js"></script>
<body>

<div id="app">
    <li v-for="item in letters" :key="item"> {{item}}</li>

    <div>
        给数组的末尾添加值<br/>
        <button @click="push()">push操作</button>
    </div>

    <div>
        删除数组中的最后一个元素<br/>
        <button @click="pop()">pop操作</button>
    </div>

    <div>
        删除数组中的第一个元素<br/>
        <button @click="shift()">shift操作</button>
    </div>

    <div>
        在数组最前面添加元素<br/>
        <button @click="unshift()">unshift操作</button>
    </div>

    <div>
        splice：删除/插入/替换元素<br/>
        删除元素：第二个参数传入你要删除的元素（如果没有传，就删除后面的所有元素）<br/>
        splice(1,2) 从第1位开始，往后删除2个元素<br/>
        替换元素：第二个参数传入你要替换几个元素，第三个参数传入你要替换的元素<br/>
        splice(1,2,'m','n') 从第1位开始，把后面的两个元素替换为m和n<br/>
        也可以这么写，这样就是类似于插入元素<br/>
        splice(1,2,'m','m','q','x') 从第1位开始，把后面的两个元素替换为m m q x<br/>

        <button @click="splice()">splice操作</button>
    </div>

    <div>
        排序操作<br/>
        <button @click="sort()">sort操作</button>
    </div>

    <div>
        反转操作<br/>
        <button @click="reverse()">reverse操作</button>
    </div>

    <div>
        Vue的set函数修改值<br/>
        <button @click="set()">set操作</button>
    </div>
</div>

</body>

<script>
    const vue = new Vue({
        'el': '#app',
        'data': {
            letters: ['a', 'b', 'c', 'd', 'e']
        },
        'methods': {
            push() {
                this.letters.push("a")
            },
            pop() {
                this.letters.pop();
            },
            shift() {
                this.letters.shift();
            },
            unshift() {
                this.letters.unshift("qaq", "qaq", "qaq");
            },
            splice() {
                this.letters.splice(1, 2, 'm', 'n');
            },
            sort() {
                this.letters.sort();
            },
            reverse() {
                this.letters.reverse();
            },
            set() {
                Vue.set(this.letters, 1, 'qaqaqaq');
            }

        }
    })
</script>
</html>